<template>
	<div class="dashboard-header">
		<div class="filters">
			<select id="department">
				<option value="all">全部机构</option>
			</select>
			<select id="year">
				<option value="2024">2024年</option>
				<option value="2023">2023年</option>
				<option value="2022">2022年</option>
			</select>
		</div>

		<h1 class="main-title">人事薪酬系统可视化大屏</h1>

		<div class="time-display">
			<span class="time">{{ currentTime }}</span>
			<span class="date">{{ currentDate }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const currentTime = ref("--:--:--");
const currentDate = ref("---- -- -- 星期-");
let timer: number | null = null;

const updateTime = () => {
	const now = new Date();
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, "0");
	const day = String(now.getDate()).padStart(2, "0");
	const week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()];

	const hours = String(now.getHours()).padStart(2, "0");
	const minutes = String(now.getMinutes()).padStart(2, "0");
	const seconds = String(now.getSeconds()).padStart(2, "0");

	currentTime.value = `${hours}:${minutes}:${seconds}`;
	currentDate.value = `${year}-${month}-${day} ${week}`;
};

onMounted(() => {
	updateTime(); 
	timer = window.setInterval(updateTime, 1000);
});

onUnmounted(() => {
	if (timer !== null) {
		clearInterval(timer);
	}
});
</script>

<style lang="less" scoped>
@import "../variables.less";

.dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: @grid-gap;
	padding: 0 @base-padding; 
}

.filters select {
	background-color: rgba(4, 35, 84, 0.8);
	color: @text-color-light;
	border: 1px solid #0a5299;
	padding: 5px 10px;
	border-radius: 4px;
	margin-right: 10px;
	outline: none;
	font-size: 14px;
}

.main-title {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: @text-color-light;
	text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
	background: linear-gradient(90deg, rgba(0, 51, 153, 0), rgba(0, 153, 255, 0.5), rgba(0, 51, 153, 0));
	padding: 10px 0;
	flex-grow: 1;
	margin: 0 20px;
	border-top: 1px solid rgba(0, 195, 255, 0.4);
	border-bottom: 1px solid rgba(0, 195, 255, 0.4);
}

.time-display {
	font-weight: bold;
	color: @text-color-light;
	text-align: right;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	.time {
		font-size: 20px;
	}
	.date {
		font-size: 12px;
		color: @text-color; // Use variable
	}
}
</style>
